<template>
  <div class="nav">
    <div
        class="nav__item"
        :class="pageIndex === item.index ? 'nav__item--active' : ''"
        v-for="item of items"
        :key="item.index"
        @click="handleClick(item.index)"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'Nav',
  data(){
    return{
      items:[
        {
          title: '项目介绍',
          index: 0
        },
        {
          title: '项目灵感',
          index: 1
        },
        {
          title: '项目亮点',
          index: 2
        },
        {
          title: '技术说明',
          index: 3
        },
        {
          title: '难点突破',
          index: 4
        },
        {
          title: '团队成员',
          index: 5
        }
      ],
    }
  },
  computed:{
    ...mapState(['pageIndex'])
  },
  methods:{
    handleClick(index){
      this.pageIndex = index;
      let page = document.querySelector("#page" + index);
      window.scrollTo({
        top: page.offsetTop,
        behavior: "smooth"
      });
    }

  }

}
</script>

<style scoped lang="scss">
$light-yellow: #F0DFB3;
$dark-yellow: #DCB613;
.nav{
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .nav__item{
      margin: 0 auto;
      padding: 0 5px;
      color: $light-yellow;
      writing-mode: vertical-lr;
      text-orientation: upright;
      letter-spacing: 3px;
      cursor: default;
      transition: .2s;

      &:hover{
        color: $dark-yellow;
        cursor: pointer;
      }
    }

    .nav__item--active{
      color: $dark-yellow;
      border-left: $dark-yellow solid 1px;
    }
  }
</style>
